<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name = "referrer" content = "origin" >
    <title>首页</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../css/home.css">
</head>
<body>
<el-container id="app">
    <el-header style="height: 168px">
<!--        导航栏的布局-->
        <el-row id="nav" align="middle" type="flex" justify="center">
            <el-col :span="3">
                <img src="../images/logo.png">
            </el-col>
            <el-col :span="1"> </el-col>
            <el-col :span="2">
                <el-link type="info" href="/books/booType/首页">首页</el-link>
            </el-col>
            <el-col :span="3">
                <el-button type="text" @click="gotoBookInfo('/pages/bookInfo.html',1,'经典文学')">经典文学</el-button>
            </el-col>
            <el-col :span="3">
                <el-button type="text" @click="gotoBookInfo('/pages/bookInfo.html',2,'通俗小说')">通俗小说</el-button>
            </el-col>
            <el-col :span="3">
                <el-link type="info" href="/books/booType/经典文学">经典文学</el-link>
            </el-col>
            <el-col :span="3">
                <el-link type="info" href="/books/booType/经典文学">经典文学</el-link>
            </el-col>
            <el-col :span="5"> </el-col>
            <el-col :span="3">
                <div v-if="!isLogined">
<!--                    条件（没有登录）成立，显示如下内容，不成立，显示else内容-->
                    <el-button  @click="showLogWin" size="mini">登录</el-button>
                    <el-button  @click="showRegWin" size="mini">注册</el-button>
                </div>
                <div v-else>
                    <el-dropdown>
                        <el-avatar src="../images/avatars/040601.jpg"></el-avatar>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-setting"
                            ><label @click="setting">个人中心</label></el-dropdown-item
                            >
                            <el-dropdown-item icon="el-icon-circle-close"
                            ><label @click="exit">退出登录</label></el-dropdown-item
                            >
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-col>
            <el-col :span="1"> </el-col>
        </el-row>
        <el-row style="height: 10%" align="middle" type="flex" justify="center"></el-row>
<!--        搜索栏的布局-->
        <el-row id="search" align="middle" type="flex" justify="center">
            <el-col :span="10"></el-col>
            <el-col :span="6">
                <el-select style="width: 18%" v-model="searchType" placeholder="请选择" >
                    <el-option
                            v-for="item in searchTypes"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-input style="width: 57%"  v-model="searchWord" placeholder="请输入搜索关键词"></el-input>
                <el-button style="width: 15%"  type="success" @click="searchAjax()">搜索</el-button>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="5">
                <el-button type="primary" @click="showLoadUpWin">我要上传<i class="el-icon-upload el-icon--right"></i></el-button>
            </el-col>
            <el-col :span="2"></el-col>
        </el-row>
<!--        一些对话框,平时隐藏的,不可见-->
        <el-dialog title="登录对话框" :visible.sync="isLogDialogWin" width="30%">
            <el-form :model="logForm" ref="logForm" label-width="100px">
                <el-form-item prop="user">
                    <el-input v-model="logForm.user" required="required"
                    placeholder="请输入用户名" prefix-icon="el-icon-user-solid"></el-input>
                </el-form-item>
                <el-form-item prop="pass">
                    <el-input v-model="logForm.pass" required="required" show-password
                              placeholder="请输入密码" prefix-icon="el-icon-user-solid"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="logAJAX(logForm)">登录</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>
        <el-dialog title="注册对话框" :visible.sync="isRegDialogWin">

        </el-dialog>

        <el-dialog title="上传对话框" :visible.sync="isLoadUpDialogWin">

        </el-dialog>
    </el-header>

    <el-main>
<!--        搜索的结果展示-->
        <el-table v-if="isShowSearchInfo"
                :data="searchData"
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="book_title"
                    label="书名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="book_author"
                    label="作者"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="download_times"
                    label="下载次数"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="book_summary"
                    label="简介">
            </el-table-column>
        </el-table>
        <el-row v-else  type="flex" justify="center">
            <el-col :span="1"></el-col>
            <el-col :span="8">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>卡片名称</span>
                    </div>
                    <div style="height: 20px;line-height: 20px;border-bottom-style: dashed" v-for="o in 4" :key="o" class="text item">
                        {{'列表内容 ' + o }}
                    </div>
                </el-card>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="8">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>卡片名称</span>
                    </div>
                    <div v-for="o in 4" :key="o" class="text item">
                        {{'列表内容 ' + o }}
                    </div>
                </el-card>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="4">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>卡片名称</span>
                    </div>
                    <div v-for="o in 4" :key="o" class="text item">
                        {{'列表内容 ' + o }}
                    </div>
                </el-card>
            </el-col>
            <el-col :span="1"></el-col>

        </el-row>

    </el-main>

    <el-footer>

    </el-footer>
</el-container>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            isLogined:false,//是否登录
            isLogDialogWin:false,//是否显示登录对话框
            isRegDialogWin:false,
            isLoadUpDialogWin:false,
            logForm:{
                user:'',
                pass:''
            },
            searchType:'书名',//搜索方式
            searchTypes:[{
                value:'书名',
                label:'书名'
            },{
                value:'作者',
                label:'作者'
            }],
            searchWord:'',
            searchData:[],
            isShowSearchInfo:false
        },
        methods:{
            gotoBookInfo(url,typeNo,typeStr){
                console.log(typeStr);
                window.sessionStorage.setItem("typeNo",typeNo);//写入浏览器共享变量
                window.sessionStorage.setItem("typeStr",typeStr);
                //下面是跳转到新的页面
                self.location = url;
            },
            showLogWin(){
                //弹出登录对话框
                console.log("showLogWin");
                this.isLogDialogWin=true;
            },
            showRegWin(){
                //弹出注册对话框
                this.isRegDialogWin=true;
            },
            showLoadUpWin(){
                //弹出我要上传对话框
                this.isLoadUpDialogWin=true;
            },
            setting(){
                //跳转到个人中心页面
            },
            exit(){
                //发起请求，退出登录：客户端isLogined变量改成false,后端的session要清除
                axios.get("/users/logout").then((resp)=>{
                    this.isLogined=false;
                }).catch();
            },
            logAJAX(data){
                //发起登录请求
                let that=this;
                axios.post("/users/login",{
                    userCode:this.logForm.user,
                    userPassword:this.logForm.pass
                }).then(function (resp){
                    console.log(resp.data);
                    if(resp.data.code==1001){
                        that.isLogined=true;
                        that.isLogDialogWin=false;
                    }else {
                        // this.$message({
                        //     message: '登录失败，请重新登录',
                        //     type: 'warning'
                        // });
                    }
                }).catch((error)=>{
                    console.log(error);
                });
            },
            searchAjax(){
                //向后端控制器发起搜索请求,携带搜索的关键词和搜索方式
                axios.post('/books/search',{
                    searchType:this.searchType,
                    searchWord:this.searchWord
                })
                    .then((resp)=>{
                        //向后端请求后,返回数据,执行这里
                        if(resp.data.code==1003){
                            this.isShowSearchInfo=true;
                            console.log(resp.data.data);
                            this.searchData=resp.data.data
                        }else {
                            //后端返回数据,但是不是搜索数据
                        }
                    })
                    .catch();
            },
            //下面是中间main部分的方法
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            }
        }
    });
</script>
</html>